<template>
  <v-card class="paperCard mt-2" >

      <div class="title" @click="toPaperDetail()" >
        <vue-mathjax :formula="paper.title" :safe="false"></vue-mathjax>
      </div>

    <div class="line0">
      <div class="authors">
        <span v-for="(author, index) in paper.authors" :key="index" class="author" @click="author.id === undefined ? searchAuthor(author.name) : toAuthorProfile(author.id)"> {{author.name}} <span v-if="author.id === undefined">🔍</span>,</span>
      </div>
      <div style="font-size: 14px;" class="abstract">
        <vue-mathjax :formula="paper.abstract" :safe="false"></vue-mathjax>
      </div>
      <span style="font-size: 14px; padding-top: 1.5%; color: black" v-if="paper.venue !== '' && paper.venue.name !== ''" v-html="paper.venue.name">, </span>
      <span style="font-size: 14px; padding-top: 1.5%; color: black" v-if="paper.pages_start !== '' && paper.pages_end !== ''">pp.{{paper.pages_start}}-{{paper.pages_end}}, </span>
      <span style="font-size: 14px; padding-top: 1.5%; color: black" v-if="paper.year !== ''">({{paper.year}})</span>
    </div>

    <v-divider></v-divider>

    <div class="line1" >
      <span style="">被引用 : </span>
      <span style="color: green;margin-right: 1%;">{{ paper.n_citation ? paper.n_citation : 0 }}</span>
      <span> |</span>
      <span style="margin-left: 1% ; "> 浏览 : </span>
      <span style="color: green;margin-right: 1%">{{ paper.view_num ? paper.view_num : 0 }}</span>

      <div class="card-action">
          <slot name="action"></slot>
      </div>

      <v-btn @click="downloadPDF" style="float: right; margin-right: 1%" outlined color="primary" x-small>原文链接</v-btn>

      <v-btn @click="dialog=true" style="float: right; margin-right: 1%" outlined color="primary" x-small>引用</v-btn>

      <v-dialog
          v-model="dialog"
          width="500"
      >

        <v-card>
          <v-card-title class="text-h5 grey lighten-2;" >
            引用
          </v-card-title>

          <v-card-text>
            <h3 style="margin-top: 1%">MLA:</h3>
            <div>{{this.cite.MLA[0]}}</div>
            <h3 style="margin-top: 2%">APA:</h3>
            <div>{{this.cite.APA[0]}}</div>
            <h3 style="margin-top: 2%">GB/T 7714:</h3>
            <div>{{this.cite.GB[0]}}</div>
          </v-card-text>

          <v-divider></v-divider>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
                style="background-color: #006b89; color: white; "
                text
                @click="dialog = false"
            >
              取消
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

    </div>


  </v-card>
</template>

<script>


import axios from "axios";


export default {
  name: "PaperCard",
  props:['paper'],

  data() {
    return {
      title: 'Semantic Wikipedia.',
      readTimes: 0,
      cite: [],
      dialog: false,
    }
  },
  mounted() {
    this.getCite();
  },

  methods: {
    getCite() {
      // this.dialog = true;
      axios.get(
          '/api/scholar/paper/cite/' + this.paper.id + '/',
      )
          .then (
              (response) => {
                console.log(response.data);
                this.cite = response.data;
              }
          )
    },
    toPaperDetail(){
      this.$api.apply.post_skim(this.paper.id)
      this.$router.push({name:'PaperDetail' , params: {id: this.paper.id , n_viewed : this.paper.n_viewed ? this.paper.n_viewed : 0} }) ;
    },
    ToProfile(id , name) {
      if( id === undefined || id === "" ) {
        this.searchAuthor( name );
      }
      else {
        this.toAuthorProfile(id);
      }
    },
    downloadPDF() {
      // this.searchById();
      // alert(this.paper_1.pdf);
      let url = this.paper.pdf;
      if(url !== undefined && url !== '') {
        window.open(url);
      }
      else {
        this.$notify.error ({
          title: '抱歉,暂无相关资源!',
        })
      }
    },
    collect() {

    },
    toAuthorProfile(id){
      this.$router.push({path: '/profile/' + id});
      if(this.$route.path !== '/' && this.$route.path !== '/searchResults'){
        window.location.reload(false);
      }
    },
    searchAuthor(name){
      this.$notify.error({
        title: '搜索学者（开发中）',
        message: name
      })
    },
  },
}
</script>

<style scoped>

.paperCard {
  /*width: 60%;*/
  margin: 0 auto;
}

.title {
  font-size: 20px!important;
  margin-left: 2%;
  padding-top: 2%;
  margin-right: 2%;
}

.title:hover {
  color: purple;
  cursor: pointer;
}

.author {
  color: green;
  font-size: 10px;
}

.author:hover {
  cursor: pointer;
}

.line0 {
  margin: 1% 2% 2%;
}

.line1 {
  font-size: 15px;
  padding-bottom: 2.5%;
  margin-top: 2%;
  margin-left: 2%;
  margin-right: 2%;
}

.abstract {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.authors {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}



</style>

<style lang="sass" scoped>
.card-action
  margin: 0 1%
  float: right
</style>
